<template>
  <div class="container">



    <base-input-view title="序列号" place-holder="请输入16位序列号" errmsg="请输入正确序列号" input-type="serial16" margintop="0.55" tag="1"
                     @textCallBack="_textCallBack"/>
    <base-input-view title="验证码" place-holder="请输入验证码" errmsg="请6位数字验证码" input-type="sms" margintop="0" tag="2"/>
    <bottomBtn class="bottomBtn" title='查询' :disabled="bottomBtnisDisable"/>
    <div class="placeholder"></div>


    <div class="chooseViewbg">
      <div class="chooseViewHead">
        <span>查询内容</span>
        <div class="chooseHeadViewBtn" @click="showChooseView">
          <span>请选择查询内容</span>
          <img :src="isChooseViewShow?jtup:jtdown" alt="">
        </div>

      </div>
      <div class="chooseBody" v-show="isChooseViewShow">
        <div class="chooseItem" @click="chooseMe(1)">
          <span>交易查询</span>
          <img :src='chooseImg' v-show="isChooseItemOne">
        </div>
        <div class="chooseItem" @click="chooseMe(2)">
          <span>余额查询</span>
          <img :src='chooseImg' v-show="!isChooseItemOne">
        </div>
        <div class="maskView"></div>
      </div>
    </div>
  </div>
</template>

<script>
import baseInputView from '../../components/inputView/baseInputView'
import bottomBtn from '../../components/bottomBtn'

import chooseImg from '../../assets/img/duihao.png';
import jtdown from '../../assets/img/jtdown.png'
import jtup from '../../assets/img/jtup.png'

export default {
  name: 'searchComponet',
  data () {
    return {
      bottomBtnisDisable:true,
      isChooseViewShow:false,
      isChooseItemOne:true, //默认第一条选中
      chooseImg:chooseImg,
      jtdown:jtdown,
      jtup:jtup,
    }
  },
  components: {baseInputView, bottomBtn},
  methods: {
    /*开关选择框*/
    showChooseView(){
      this.isChooseViewShow = !this.isChooseViewShow
    },

    /*点击任意选项事件*/
    chooseMe(tag){
      this.isChooseViewShow = !this.isChooseViewShow
      if (tag === 1){
        this.isChooseItemOne = true
      }
      if (tag === 2){
        this.isChooseItemOne = false
      }
    },


    /*输入框回调*/
    _textCallBack (text, tag) {
    },
  },


}
</script>

<style scoped lang="less">
  @w:3.75rem;
  @placeHolderH:7rem;

  /*主div*/
  .container {
    width: @w;
    position: relative;
    overflow: hidden;

    /*底部按钮*/
    .bottomBtn {
      margin: 0 auto;
      margin-top: 0.3rem;
      margin-left: 0.14rem;
    }
    /*占位div*/
    .placeholder{
      width: @w;
      height: @placeHolderH;
    }

    /*绝对定位 - 选择View*/
    .chooseViewbg{
      background-color: transparent;
      width: @w;
      position: absolute;
      top: 0;left: 0;
      /*头部*/
      .chooseViewHead{
        width: @w;
        height: 0.45rem;
        background-color: white;
        border-bottom: 0.01rem solid lightgray;
        span{
          line-height: 0.45rem;
          font-size: 0.17rem;
          margin: 0 0.14rem;
        }
        /*头部-按钮*/
        .chooseHeadViewBtn{
          float: right;
          height: 0.45rem;
          margin-right: 0.14rem;
          span{
            color: #BBBBBB;
            text-align: right;
            font-size: 0.15rem;
            line-height: 0.45rem;
            margin:0;
          }
          img{
            width: 0.15rem;
            height: 0.15rem;
          }
        }
      }
      /*body部*/
      .chooseBody{
        width: @w;
        /*选择条*/
        .chooseItem{
          width: @w;
          height: 0.45rem;
          background-color: white;
          border-bottom: 0.01rem solid lightgray;
          padding: 0 0.14rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          span{
            color: black;
            font-size: 0.17rem;
            line-height: 0.45rem;
            display: inline-block;
          }
          img{
            height: 0.15rem;
            width: 0.15rem;
            display: inline-block;
          }
        }
        /*拼接的mask视图, 视觉欺骗*/
        .maskView{
          width: @w;
          height: @placeHolderH;
          background-color: #000;
          opacity: 0.4;
        }

      }

    }

  }



</style>
